Maps for UWP
手順2:コードの追加
チュートリアル > C1VectorPolylineのルートをマークする > 手順2:コードの追加

この手順では、C1VectorPolyline とマップ上の都市の両方を作成するコードを追加します。

  1. コードビューに切り替えて、次の名前空間をインポートします。
    C#
    コードのコピー
    using C1.Xaml.Maps;
    
  2. プロジェクトの名前空間宣言のすぐ下に、次のクラスを追加します。
    C#
    コードのコピー
    public class City
    {
    public Point LongLat { get; set; }
    public string Name { get; set; }
    }
    

  3. InitializeComponent() メソッドの下で、C1VectorPolyline を入れる C1VectorLayer の作成を開始します。
    C#
    コードのコピー
    // レイヤを作成してマップに追加します
    C1VectorLayer C1VectorLayer1 = new C1VectorLayer();
    maps.Layers.Add(C1VectorLayer1);
    

  4. 次に、C1VectorPolyline のポイントを作成します。
    C#
    コードのコピー
    // 初期経路
    Point[] pts = new Point[]
    {
        new Point(37.6167, 55.7500),
        new Point(40.4167, 56.1333),
        new Point(44.0075, 56.3269),
        new Point(49.6500, 58.6000),
        new Point(56.3167, 58.0000),
        new Point(60.5833, 56.8333),
        new Point(65.5333, 57.1500),
        new Point(73.3667, 54.9833),
        new Point(82.9333, 55.0167),
        new Point(93.0667, 56.0167),
        new Point(98.0167, 55.9500),
        new Point(104.2958, 52.3122),
        new Point(103.6833, 51.7176),
        new Point(103.7500, 51.6333),
        new Point(104.0000, 51.3020),
        new Point(105.8667, 51.7176),
        new Point(107.6000, 51.8333),
        new Point(113.4667, 52.0500),
        new Point(123.9333, 53.9833),
        new Point(128.4667, 50.9167),
        new Point(132.9011, 48.8014),
        new Point(135.0667, 48.4833),
        new Point(131.9667, 43.8000),
        new Point(131.9000, 43.1333),
    };
    

  5. ポイントのコレクションを作成し、作成済みのポイントをその中に含めます。
    C#
    コードのコピー
     // コレクションを作成し、データを設定します
     PointCollection pcoll = new PointCollection();
     foreach (Point pt in pts)
         pcoll.Add(pt);
    

  6. 折れ線をベクターレイヤに追加し、ポイントのコレクションをベクターレイヤに割り当て、外観をカスタマイズします。
    C#
    コードのコピー
    // 折れ線を作成して、ベクターレイヤに子として追加します
    C1VectorPolyline C1VectorPolyline1 = new C1VectorPolyline();
    C1VectorLayer1.Children.Add(C1VectorPolyline1);
    // ポイント
    C1VectorPolyline1.Points = pcoll;
    // 外観
    C1VectorPolyline1.Stroke = new SolidColorBrush(Colors.Red);
    C1VectorPolyline1.StrokeThickness = 1;
    

  7. 最後に、都市のリストを作成して、DataContextC1Maps コントロールに追加します。これらの都市は、シベリア横断鉄道の主な停車駅を示しています。
    C#
    コードのコピー
          City[] cities = new City[]
     {
        new City(){LongLat= new Point(37.6167, 55.7500), Name="Moscow"},
        new City(){LongLat= new Point(40.4167, 56.1333), Name="Vladimir"},
        new City(){LongLat= new Point(44.0075, 56.3269), Name="Nizhny Novgorod"},
        new City(){LongLat= new Point(49.65, 58.6), Name="Kirov"},
        new City(){LongLat= new Point(56.3167, 58.000), Name="Perm"},
        new City(){LongLat= new Point(60.5833, 56.8333), Name="Yekaterinburg"},
        new City(){LongLat= new Point(65.5333, 57.1500), Name="Tyumen"},
        new City(){LongLat= new Point(73.3667, 54.9833), Name="Omsk"},
        new City(){LongLat= new Point(82.9333, 55.0167), Name="Novosibirsk"},
        new City(){LongLat= new Point(93.0667, 56.0167), Name="Krasnoyarsk"},
        new City(){LongLat= new Point(98.0167, 55.9500), Name="Tayshet"},
        new City(){LongLat= new Point(104.2958, 52.3122), Name="Irkutsk"},
        new City(){LongLat= new Point(107.6000, 51.8333), Name="Ulan Ude"},
        new City(){LongLat= new Point(113.4667, 52.05), Name="Chita"},
        new City(){LongLat= new Point(132.9011, 48.8014), Name="Birobidzhan"},
        new City(){LongLat= new Point(135.0667, 48.4833), Name="Khabarovsk"},
        new City(){LongLat= new Point(131.9667, 43.8000), Name="Ussuriysk"},
        new City(){LongLat= new Point(131.9, 43.1333), Name="Vladivostok"},
     };
          maps.DataContext = cities;
      }
    

    この手順では、アプリケーションのコードを作成しました。このコードは、C1VectorLayer とポイントのコレクションを作成し、ポイントをコレクションに追加し、さらにポイントを C1VectorPolyline に割り当てました。次に、C1VectorPolyline の外観を調整し、マップ上でマークされる都市のリストを追加しました。

    次の手順では、このアプリケーションを実行します。